<template>
  <div class="pages">
    <view v-if="isAuditMode==true">开发中敬请期待！！！</view>
    <view
      v-if="isAuditMode==false"
      class="content"
    >
      <assNavbar title="发布"></assNavbar>
      <view
        class="title-input ss-flex ss-row-center"
        :style="{ borderColor: theme.main_color }"
      >
        <input
          class="ss-flex-1"
          type="text"
          v-model="article.title"
          placeholder="点击添加标题"
          placeholder-class="input-placeholder"
        />
      </view>
      <view class="title-tips">好的标题是最容易吸引用户的阅读兴趣哦</view>
      <view
        class="taste"
        @click="selectMedia"
      >
        <view
          v-if="!article.file.url"
          class="ss-flex-col ss-row-center ss-col-center"
        >
          <view class="_aicon-xaingji"></view>
          图片
        </view>
        <image
          v-else
          :src="
            cdnUrl(article.file.url) +
            (article.file.type.includes('video') ? '?x-oss-process=video/snapshot,t_0,f_jpg' : '')
          "
          mode="aspectFill"
        />
      </view>
      <view
        class="note"
        :style="{ borderColor: theme.main_color }"
      >
        <textarea
          :maxlength="-1"
          v-model="article.content"
          auto-height
          placeholder="请描述一下您要发布的内容吧~"
        ></textarea>
      </view>

      <!-- <view class="title-tips"
      >可以选择一个您想讨论的{{ state.shareData.map((v) => v.class).join('/') }}</view
    > -->

      <view class="settings">
        <view
          class="settings-item ss-flex justify-between align-center"
          @click="state.cart_show = true"
        >
          <view class="ss-flex">
            <uni-icons
              type="cart"
              size="28"
              color="#000000"
            ></uni-icons>
            <view
              class="settings-text ss-line-1"
              v-if="state.goods"
            >{{ state.goods.title }}</view>
            <view
              class="settings-text ss-line-1"
              v-if="state.shop"
            >{{ state.shop.title }}</view>
            <view
              class="settings-text"
              v-if="!state.shop && !state.goods"
            >推荐带货</view>
          </view>
          <view class="settings-item-right">
            <uni-icons
              type="forward"
              size="26"
              color="#000000"
            ></uni-icons>
          </view>
        </view>

        <!-- <view
        class="settings-item ss-flex justify-between align-center"
        @click="state.settings_show = true"
      >
        <view class="ss-flex">
          <uni-icons type="gear" size="28" color="#000000"></uni-icons>
          <view class="settings-text">更多设置</view>
        </view>

        <view class="settings-item-right">
          <uni-icons type="forward" size="26" color="#000000"></uni-icons>
        </view>
      </view> -->
      </view>

      <view class="publish">
        <button
          class="ss-flex ss-row-center"
          @click="submit"
          :style="{ background: theme.main_color }"
        >
          <view class="ss-flex ss-row-center">
            <view
              class="fabu _aicon-shangchuan"
              :style="{ color: theme.main_color }"
            ></view>
          </view>发布
        </button>
      </view>

      <su-popup
        type="bottom"
        @change="changeSettingsPop"
        :show="state.settings_show"
        backgroundColor="#fff"
        maskBackgroundColor="rgba(0, 0, 0, 0.8)"
        :round="30"
      >
        <view class="settings-box">
          <view class="settings-title">更多设置</view>
          <view class="settings-items ss-flex justify-between align-center border-b-f3">
            <view class="settings-left">允许下载</view>
            <view class="settings-right">
              <switch
                :checked="state.download"
                :color="theme.main_color"
                style="transform: scale(0.7)"
              />
            </view>
          </view>
          <view
            class="settings-items ss-flex justify-between align-center border-b-f3"
            @click="changePowerType('transpond')"
          >
            <view class="settings-left">转发权限</view>
            <view class="settings-right ss-flex justify-center align-center">
              <view class="right-text">
                <text v-show="state.transpond === 'my'">仅自己</text>
                <text v-show="state.transpond === 'friends'">仅互关好友</text>
                <text v-show="state.transpond === 'all'">所有人</text>
              </view>
              <uni-icons
                type="right"
                size="25"
                color="#BCBCBC"
              ></uni-icons>
            </view>
          </view>
          <view
            class="settings-items ss-flex justify-between align-center"
            @click="changePowerType('comment')"
          >
            <view class="settings-left">评论权限</view>
            <view class="settings-right ss-flex justify-center align-center">
              <view class="right-text">
                <text v-show="state.comment === 'my'">仅自己</text>
                <text v-show="state.comment === 'friends'">仅互关好友</text>
                <text v-show="state.comment === 'all'">所有人</text>
              </view>
              <uni-icons
                type="right"
                size="25"
                color="#BCBCBC"
              ></uni-icons>
            </view>
          </view>
          <view
            class="ss-flex justify-center ss-m-t-40"
            @click="state.settings_show = false"
          >
            <uni-icons
              type="down"
              size="25"
              color="#BCBCBC"
            ></uni-icons>
          </view>
        </view>
      </su-popup>

      <su-popup
        type="bottom"
        @change="changeCartPop"
        :show="state.cart_show"
        backgroundColor="#fff"
        maskBackgroundColor="rgba(0, 0, 0, 0.8)"
        :round="30"
      >
        <view class="cart-box">
          <view
            v-if="platform == 'xyh'"
            class="cart-box-item ss-flex align-center border-b-f3"
            @click="
              state.cart_show = false;
              sheep.$router.go('/association/pages/shopList', {
                backPage: '/association/pages/publishVideo',
              });
            "
          >
            <image
              class="cart-image"
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/5fc3d36866047ed562343c1f7f36dfad.png"
            ></image>
            <view class="cart-name">添加本地生活门店</view>
          </view>

          <view
            class="cart-box-item ss-flex align-center"
            @click="
              state.cart_show = false;
              sheep.$router.go('/association/pages/goodsList', {
                backPage: '/association/pages/publishVideo',
              });
            "
          >
            <image
              class="cart-image"
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250416/0742001d0f32272e99c5914f5a12a98b.png"
            ></image>
            <view class="cart-name">添加商城商品</view>
          </view>
          <view
            class="ss-flex justify-center ss-m-t-80"
            @click="state.cart_show = false"
          >
            <uni-icons
              type="down"
              size="25"
              color="#BCBCBC"
            ></uni-icons>
          </view>
        </view>
      </su-popup>

      <su-popup
        type="bottom"
        @change="changePowerPop"
        :show="state.power_show"
        backgroundColor="#fff"
        maskBackgroundColor="rgba(0, 0, 0, 0.8)"
        :round="30"
      >
        <view class="settings-box">
          <view class="settings-title">转发权限</view>
          <view
            class="settings-items ss-flex justify-between align-center border-b-f3"
            @click="changePower('all')"
          >
            <view class="settings-left">所有人</view>
            <view class="settings-right">
              <uni-icons
                type="checkmarkempty"
                size="30"
                color="#AAAAAA"
                v-show="state[state.powerType] === 'all'"
              ></uni-icons>
            </view>
          </view>
          <view
            class="settings-items ss-flex justify-between align-center border-b-f3"
            @click="changePower('friends')"
          >
            <view class="settings-left">仅互关好友</view>
            <view class="settings-right">
              <uni-icons
                type="checkmarkempty"
                size="30"
                color="#AAAAAA"
                v-show="state[state.powerType] === 'friends'"
              ></uni-icons>
            </view>
          </view>
          <view
            class="settings-items ss-flex justify-between align-center"
            @click="changePower('my')"
          >
            <view class="settings-left">仅自己</view>
            <view class="settings-right">
              <uni-icons
                type="checkmarkempty"
                size="30"
                color="#AAAAAA"
                v-show="state[state.powerType] === 'my'"
              ></uni-icons>
            </view>
          </view>
        </view>
      </su-popup>
    </view>
  </div>
</template>

<script setup>
import appApi from '@/sheep/api/app';

import assNavbar from '@/components/ass-navbar.vue';
import { chooseFile, cdnUrl } from '../utils/index.js';
import sheep from '@/sheep';
import API from '../api';
import association from '@/association/store';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import { platform } from '../config';


const isAuditMode = computed(() => sheep.$store('app').isAuditMode);

const article = reactive({
  // 标题
  title: '',
  // 主文章
  content: '',
  file: {},
  // 店铺推荐文案
  store_promotion_content: '',
  // 店铺标题
  store_promotion_title: '',
  // 推广店铺id
  store_promotion_id: '',

  // 商品推荐文案
  goods_promotion_content: '',
  // 推广商品id
  goods_promotion_id: '',
  // 商品标题
  goods_promotion_title: '',

  // 套餐推荐文案
  purchase_promotion_content: '',
  // 推广套餐id
  purchase_promotion_id: '',
  // 套餐标题
  purchase_promotion_title: '',
  download: '1',
  transpond: 'all',
  comment: 'all',
});
const state = reactive({
  id: '',
  shareData: [
    // {
    //   icon: 'gouwudai',
    //   title: '添加酒店推广',
    //   class: '商品',
    //   type: 'store',
    //   show: false,
    // },
  ],
  settings_show: false, // 更多设置
  cart_show: false, // 带货
  power_show: false, // 权限弹窗
  powerType: '', // 当前操作的权限类型
  download: false, // 下载权限
  transpond: 'all', // 转发权限
  comment: 'all', // 评论权限
  goods: null, // 选择的商品
  shop: null, // 选择的店铺
});

// 更多设置弹窗状态变化
const changeSettingsPop = (e) => {
  state.settings_show = e.show;
};

// 带货弹窗状态变化
const changeCartPop = (e) => {
  state.cart_show = e.show;
};

// 权限弹窗状态变化
const changePowerPop = (e) => {
  state.power_show = e.show;
};

// 切换权限类型
const changePowerType = (type) => {
  state.powerType = type;
  state.settings_show = false;
  state.power_show = true;
};

// 修改权限
const changePower = (type) => {
  state[state.powerType] = type;
  state.power_show = false;
};

// 修改submit函数
const submit = async () => {
  if (submitCheck()) {
    let res = await API.addFind({
      category_id: state.id,
      title: article.title,
      ...article,
      file: article.file.url,
      download: state.download ? '1' : '0',
      transpond: state.transpond,
      comment: state.comment,
      goods_promotion_id: state.goods ? state.goods.id : '',
      store_promotion_id: state.shop ? state.shop.id : '',
    });
    if (res.code == 1) {
      uni.showToast({
        icon: 'none',
        mask: true,
        title: '发布成功',
        duration: 1500,
        success: () => {
          setTimeout(() => {
            sheep.$router.back();
            uni.$emit('tabFun');
          }, 1500);
        },
      });
    } else {
      uni.showToast({
        icon: 'none',
        title: res.msg,
        duration: 1000,
      });
    }
  }
};
const selectMedia = async () => {
  let fileArr = await chooseFile();
  console.log('1111');
  if (!fileArr)
    return uni.showToast({
      icon: 'none',
      title: '选择文件失败 请检查文件是否存在',
      duration: 1000,
    });
  console.log('收到的回调', fileArr);
  let res = await Promise.all(
    fileArr.map((file) => {
      return API.upload(file.url);
    }),
  );
  if (!res) {
    article.file = {};
    return uni.showToast({
      icon: 'none',
      title: '上传失败 请重试',
      duration: 1000,
    });
  }
  article.file = {
    ...fileArr[0],
    url: res[0].url,
  };
  console.log(article.file);
};
const submitCheck = () => {
  let toast = '';
  if (!article.title) {
    toast = '请先填写标题';
  } else if (!article.content) {
    toast = '请输入文章内容';
  } else if (!article.file.url) {
    toast = '请上传文章封面';
  } else {
    return true;
  }

  uni.showToast({
    icon: 'none',
    title: toast,
    duration: 1000,
  });
  return false;
};
const theme = computed(() => association().theme);
const resetPromotion = (type) => {
  article[`${type}_promotion_title`] = '';
  article[`${type}_promotion_id`] = '';
  article[`${type}_promotion_content`] = '';
};

const backfill = async (image) => {
  const res = await API.upload(image);
  if (res && res.url) {
    article.file = {
      type: 'image',
      url: res.url,
    };
  }
};

onLoad(async (e) => {
  state.id = e.id;
  if (e && e.image) {
    await backfill(e.image);
  }

  // 监听商品选择
  uni.$on('select', (obj) => {
    state.goods = obj;
    state.shop = null;
  });

  // 监听店铺选择
  uni.$on('select_shop', (obj) => {
    state.shop = obj;
    state.goods = null;
  });
});

onUnload(() => {
  uni.$off('select');
  uni.$off('select_shop');
});
</script>


<style lang="scss" scoped>
@import '@/association/scss/index.scss';
view {
  box-sizing: border-box;
}

.content {
  background-color: #f6f6f6;
}

.fabu {
  color: #000;
}

.title-input {
  background-color: #fff;
  padding: 0 20rpx;
  height: 70rpx;
  border: 1rpx solid #0ad5ea;
  border-radius: 20rpx;
  margin: 25rpx 25rpx 10rpx;

  .input-placeholder {
    text-align: center;
    font-size: 28rpx;
    color: #b8b8b8;
  }
}

.uploader {
  height: 300rpx;
  width: 300rpx;
}

.title-tips {
  text-align: center;
  font-size: 24rpx;
  color: #878787;
}

.share {
  margin: 25rpx;
  background-color: #fff;
  border-radius: 20rpx;

  & > textarea {
    width: 100%;
    min-height: 240rpx;
    margin: 20rpx;

    .input-placeholder {
      font-size: 28rpx;
    }
  }

  .b-border {
    border-bottom: 1rpx dashed #0ad5ea !important;
  }

  .share-title {
    padding: 0 20rpx;
    text-align: center;
    font-size: 28rpx;
    height: 94rpx;
    border-bottom: 1rpx solid transparent;

    .share-icon {
      font-size: 34rpx;
      margin-right: 20rpx;
    }

    .share-tips {
      font-size: 22rpx;
      color: #989292;
    }
  }
}

.note {
  margin: 25rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  border: 1rpx solid #0ad5ea;

  & > textarea {
    width: 100%;
    min-height: 240rpx;

    .input-placeholder {
      font-size: 28rpx;
    }
  }
}

.publish {
  height: calc(env(safe-area-inset-bottom) + 108rpx);

  & > button {
    position: fixed;
    width: 480rpx;
    transform: translate(-50%, 0%);
    bottom: calc(env(safe-area-inset-bottom) + 10rpx);
    left: 50%;
    height: 88rpx;
    background: #0ad5ea;
    border-radius: 20rpx;
    margin: 0;
    padding: 0;
    font-size: 28rpx;
    color: #fff;
    line-height: 1;

    & > view {
      height: 34rpx;
      width: 34rpx;
      border-radius: 50%;
      background-color: #fff;
      margin-right: 10rpx;

      & > view {
        font-size: 24rpx;
        color: #0ad5ea;
      }
    }
  }
}

.taste {
  background-color: #f6f6f6;
  border-radius: 20rpx;
  margin: 10rpx 25rpx 25rpx;
  color: #272636;
  height: 300rpx;
  border-radius: 15rpx;
  line-height: 1.1;
  border: 1rpx dashed #b8b8b8;
  overflow: hidden;

  & > view {
    height: 100%;
    width: 100%;

    & > view {
      font-size: 90rpx;
    }

    font-size: 28rpx;
  }

  & > image {
    height: 100%;
    width: 100%;
  }
}

//  设置
.settings {
  margin-top: 30rpx;
  padding: 0 30rpx;

  .settings-item {
    height: 94rpx;
  }

  .settings-text {
    font-size: 32rpx;
    color: #666666;
    margin-left: 20rpx;
  }
}

.publish {
  margin-top: 120rpx;

  .publish-btn {
    width: 482rpx;
    height: 88rpx;
    border-radius: 20rpx;
    margin-bottom: 30rpx;

    .fabu {
      width: 40rpx;
      height: 40rpx;
      background: #ffffff;
      border-radius: 50%;
    }

    .publish-btn-text {
      font-size: 30rpx;
      color: #ffffff;
      margin-left: 15rpx;
    }
  }
}

// 弹窗
.settings-box {
  width: 100%;
  padding: 20rpx 38rpx 30rpx;

  .settings-title {
    font-size: 36rpx;
    color: #3d3d3d;
    text-align: center;
    margin-bottom: 20rpx;
  }

  .settings-items {
    height: 100rpx;

    .settings-left {
      font-size: 32rpx;
      color: #3d3d3d;
    }

    .settings-right {
      .right-text {
        color: #c4c4c4;
        font-size: 28rpx;
      }
    }
  }
}

.cart-box {
  width: 100%;
  height: 460rpx;
  padding: 46rpx 26rpx 0 34rpx;

  .cart-box-item {
    width: 100%;
    height: 94rpx;

    .cart-image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 6rpx;
    }

    .cart-name {
      flex: 1;
      font-weight: 400;
      font-size: 32rpx;
      color: #3d3d3d;

      text {
        font-weight: 400;
        font-size: 22rpx;
        color: #989292;
      }
    }
  }
}

.border-b-f3 {
  border-bottom: 2rpx solid #f3f3f3;
}
</style>